{% extends "base.html" %}
{% block title %}Hive数据血缘{% endblock %}
{% block head %}
    <script src="static/js/jquery.ba-resize.js"></script>
    <script src="static/plugins/echarts.min.js"></script>
    <script src="static/plugins/walden.js"></script>
{% endblock %}
{% block contentheader %}Hive数据血缘{% endblock %}
{% block contentsmallheader %}表数据血缘关系图{% endblock %}
{% block content %}
    <div class="row">
        <div class="col-md-2">
            <div class="dropdown">
                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
                        style="width: 200px">
                    <i class="fa fa-database"></i>
                    &nbsp 数据库 &nbsp
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" id="databases"
                    style="width: 200px;overflow:auto;">
                </ul>
            </div>
        </div>
        <div class="col-md-2">
            <div class="dropdown">
                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown"
                        style="width: 200px">
                    <i class="fa fa-table"></i>
                    &nbsp 数据表 &nbsp
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2" id="tables"
                    style="height:auto!important;max-height:200px;overflow:auto;width: 200px">
                </ul>
            </div>
        </div>
        <div class="col-md-2">
            <div class="btn btn-default" id="all_table"
                 style="width: 200px">
                <i class="fa fa-star"></i>
                &nbsp 显示所有表关系 &nbsp
                <i class="fa fa-star"></i>
            </div>
        </div>
    </div>
    <br/>
    <div class="img-responsive left-block panel panel-default" id="panel_db">
        <!-- Default panel contents -->
        <div class="panel-heading" id="div_db">DataBase:</div>
        <div class="panel-body" id="panel_tb">
            <p class="">Table:</p>


        </div>

    </div>
    <div class="img-responsive left-block panel panel-default" hidden>
        <div class="panel-body">
            <div id="all_table_canvas" class="img-responsive pull-left"
                 style="border:1px solid #c3c3c3;width: 1400px;height:600px">
            </div>
        </div>
    </div>

{% endblock %}
{% block script %}
    <script type="text/javascript" src="static/js/common.js"></script>
    <script>
        function add_class() {
            $('#treeview2').addClass('active');
            $('#menu2').addClass('menu-open');
            $('#datastrain').addClass('active');
        }
        var flag = 0;
        $('#all_table_canvas').parent().hide();
        $('#all_table').on('click', function () {
            if (flag == 0) {
                $.ajax({
                    url: "/get_blood_data",
                    success: function (data) {
                        var option = {
                            tooltip: {
                                trigger: 'item',
                                formatter: "{b}"
                            },
                            legend: {
                                data: data.legend,
                                orient: 'vertical',
                                x: 'left'
                            },
                            animationDurationUpdate: 1500,
                            animationEasingUpdate: 'quinticInOut',
                            series: [
                                {
                                    focusNodeAdjacency: true,
                                    type: 'graph',
                                    layout: 'circular',
                                    circular: {
                                        rotateLabel: false
                                    },
                                    symbolSize: 30,
                                    roam: true,
                                    categories: data.categories,
                                    label: {
                                        normal: {
                                            position: 'right',
                                            show: true
                                        },
                                        emphasis: {
                                            position: 'right',
                                            show: true
                                        }
                                    },
                                    edgeSymbol: ['', 'arrow'],
                                    edgeSymbolSize: [4, 10],
                                    data: data.nodes,
                                    links: data.edges,
                                    lineStyle: {
                                        normal: {
                                            color: 'source',
                                            opacity: 1,
                                            width: 0.5,
                                            curveness: 0.0
                                        }
                                    }
                                }
                            ]
                        };
                        var myChart = echarts.init(document.getElementById('all_table_canvas'));
                        myChart.setOption(option);
                        $(function () {
                            $('#all_table_canvas').parent().resize(function () {
                                myChart.resize({});
                            });
                        });
                        flag = 1;
                    }
                });
            }
            $('#all_table_canvas').parent().show();
            $('#panel_db').hide();
        });
        $('ul#tables').on('click', 'li', function () {
            $('#all_table_canvas').parent().hide();
            $('#panel_db').show();
            $('#panel_tb').show();
            var current_comment = hive_tbl[$(this).children('a').attr("parent")][$(this).children('a').attr("tabindex")][12];
            var current_owner = hive_tbl[$(this).children('a').attr("parent")][$(this).children('a').attr("tabindex")][4];
            var current_type = hive_tbl[$(this).children('a').attr("parent")][$(this).children('a').attr("tabindex")][8];
            var current_time = hive_tbl[$(this).children('a').attr("parent")][$(this).children('a').attr("tabindex")][1];

            if (current_comment != null)
                $('#panel_tb').children('p').html("表名称：<b>" + $(this).children('a').text() + " </b>（创建者：" + current_owner + "，建表时间：" + getLocalTime(current_time) + "，类型：" + current_type + "，注释：" + current_comment + "）");
            else
                $('#panel_tb').children('p').html("表名称：<b>" + $(this).children('a').text() + " </b>（创建者：" + current_owner + "，建表时间：" + getLocalTime(current_time) + "，类型：" + current_type + "）");

            var current_tablename = $(this).children('a').text();
            var current_dbname = hive_dbdict[$(this).children('a').attr("parent")][3];
            $('#springydemo').remove();
            $('#redraw').remove();
            $('#panel_tb').append('<div id="springydemo" class="img-responsive left-block" style="border:1px solid #c3c3c3;height:600px"></div>');
            $.ajax({
                data: {"tablename": current_tablename, 'dbname': current_dbname},
                url: "/get_blood_data",
                success: function (data) {
                    var option = {
                        tooltip: {
                            trigger: 'item',
                            formatter: "{b}"
                        },
                        legend: {
                            data: data.legend,
                            orient: 'vertical',
                            x: 'left'
                        },
                        animationDurationUpdate: 1500,
                        animationEasingUpdate: 'quinticInOut',
                        series: [
                            {
                                focusNodeAdjacency: true,
                                type: 'graph',
                                layout: 'circular',
                                circular: {
                                    rotateLabel: false
                                },
                                symbolSize: 30,
                                roam: true,
                                categories: data.categories,
                                label: {
                                    normal: {
                                        position: 'right',
                                        show: true
                                    },
                                    emphasis: {
                                        position: 'right',
                                        show: true
                                    }
                                },
                                edgeSymbol: ['', 'arrow'],
                                edgeSymbolSize: [4, 10],
                                data: data.nodes,

                                links: data.edges,
                                lineStyle: {
                                    normal: {
                                        color: 'source',
                                        opacity: 1,
                                        width: 0.5,
                                        curveness: 0.0
                                    }
                                }
                            }
                        ]
                    };
                    var myChart = echarts.init(document.getElementById('springydemo'));
                    myChart.setOption(option);
                    $(function () {
                        $('#springydemo').parent().resize(function () {
                            myChart.resize();
                        });
                    });

                }
            });

        });

        $(function () {
            $('#springydemo').resize(function () {
                console.log('ttt');
                renderer.resize()
            });
        });

    </script>
{% endblock %}